<template>
  <div class="msg-container q-ma-md">
    <div class="text-h6">我的消息通道</div>
    <div class="row justify-end q-my-md">
      <q-btn @click="openSubscribe()" color="secondary">我的订阅</q-btn>
      <q-btn @click="handleClick()" color="secondary">新增</q-btn>
    </div>
    <q-table
        :data="channels"
        :columns="columns"
        table-header-class="bg-green10"
        :table-colspan="pageSize"
        v-model:pagination="pagination"
        row-key="_id"
        separator="cell"
        :loading="isLoading">
      <template v-slot:body-cell-platform="props">
        <q-td :props="props">
          {{ handleDisplay(props.row.platform ,'platform') }}
        </q-td>
      </template>
      <template v-slot:body-cell-type="props">
        <q-td :props="props">
          {{ handleDisplay(props.row.type ,'type') }}
        </q-td>
      </template>
      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          {{ handleDisplay(props.row.status ,'status') }}
        </q-td>
      </template>
      <template v-slot:body-cell-opt="props">
        <q-td :props="props">
          <q-btn class="q-mx-sm" @click="handleDelete(props.row)" color="red">删除</q-btn>
          <q-btn class="q-mx-sm" @click="handlePause(props.row)"
                 :color="props.row.status === 1 ? 'amber' : 'secondary'">{{ props.row.status === 1 ? '停用' : '启用' }}
          </q-btn>
          <q-btn class="q-mx-sm" @click="handleClick(props.row)" color="primary">编辑</q-btn>
        </q-td>
      </template>
    </q-table>
    <q-dialog class="dialog" v-model="dialogVisible" title="接收方式配置">
      <q-card class="q-pa-lg" style="max-width: 680px">
        <div class="text-subtitle2 q-my-md">通道</div>
        <div class="row">
          <q-radio v-model="form.platform" :val="1" label="企业微信"/>
          <q-radio v-model="form.platform" :val="2" label="钉钉"/>
          <q-radio v-model="form.platform" :val="3" label="飞书"/>
          <q-radio v-model="form.platform" :val="4" label="微信(对接中)" disable/>
        </div>
        <div class="text-subtitle2 q-my-md">方式</div>
        <div class="row">
          <q-radio v-model="form.type" :val="1" label="群机器人"/>
          <q-radio v-model="form.type" :val="2" label="应用(对接中)" disable/>
        </div>
        <q-input label="名称" v-model="form.name" placeholder="请输入名称"></q-input>
        <q-input label="webhook" v-model="form.webhook" placeholder="请输入"></q-input>
        <q-input v-show="form.platform === 2" label="accessToken" v-model="form.accessToken"
                 placeholder="请输入"></q-input>
        <q-input type="textarea" label="备注" v-model="form.description" placeholder="请输入"></q-input>

        <q-card-section class="text-right">
          <q-btn class="q-ml-md" @click="dialogVisible = false">取 消</q-btn>
          <q-btn class="q-ml-md" type="primary" @click="submit()" :loading="isLoading">确 定</q-btn>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import AppActivityMixin from 'src/mixins/app-activity'
import 'highlight.js/styles/monokai-sublime.css'
import 'highlight.js/styles/base16/monokai.css'
import iMessage from 'src/api/msg/msg'

const defaultForm = {
  _id: '',
  name: '',
  description: '',
  webhook: '',
  accessToken: '',
  platform: 1,
  type: 1,
  status: null,
  createUserId: '',
  updateUserId: '',
  createdAt: '',
  updatedAt: '',
  deletedAt: ''
}
const copy = (obj) => JSON.parse(JSON.stringify(obj))

export default defineComponent({
  mixins: [AppActivityMixin],
  components: {},
  data () {
    return {
      dialogVisible: false,
      isLoading: false,
      channels: [],
      form: copy(defaultForm),
      columns: [
        {
          name: 'platform',
          label: '平台',
          field: 'platform',
          sortable: true,
          align: 'left'
        },
        {
          name: 'type',
          label: '方式',
          field: 'type',
          sortable: true,
          align: 'left'
        },
        {
          name: 'name',
          label: '名称',
          field: 'name',
          sortable: true,
          align: 'left'
        },
        {
          name: 'status',
          label: '状态',
          field: 'status',
          sortable: true,
          align: 'left'
        },
        {
          name: 'webhook',
          label: 'Webhook地址',
          field: 'webhook',
          sortable: true,
          align: 'left'
        },
        // { name: 'accessToken', label: '钉钉AccessToken', field: 'accessToken', sortable: true, align: 'left' },
        {
          name: 'description',
          label: '备注',
          field: 'description',
          sortable: true,
          align: 'left'
        },
        {
          name: 'updatedAt',
          label: '更新时间',
          field: 'updatedAt',
          sortable: true,
          align: 'left'
        },
        {
          name: 'opt',
          label: '操作',
          sortable: true,
          align: 'middle'
        }
      ],
      pagination: {
        page: 1,
        rowsPerPage: 10,
        sortBy: 'utime',
        descending: true
      },
      pageNo: 1,
      pageSize: 50
    }
  },
  watch: {},
  async mounted () {
    this.initList()
  },
  methods: {
    async initList () {
      this.channels = await iMessage.getList()
    },
    async submit () {
      const channel = copy(this.form)
      try {
        this.isLoading = true
        if (this.form._id) {
          await iMessage.update(channel)
        } else {
          await iMessage.create(channel)
        }
      } catch (err) {
        this.$notify.error(err)
      } finally {
        this.isLoading = false
      }
      this.dialogVisible = false
      await this.initList()
    },
    handleClick (channel) {
      if (channel) {
        this.form = copy(channel)
      } else {
        this.form = copy(defaultForm)
      }
      this.dialogVisible = true
    },
    handleDelete (channel) {
      this.$q.dialog({
        title: '删除确认',
        message: '确认是否要删除？',
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await iMessage.delete({
          id: channel._id
        })
        await this.initList()
      })
    },
    async handlePause (channel) {
      let status = channel.status
      if (status === 2) {
        status = 1
      } else {
        status = 2
      }
      await iMessage.pause({
        id: channel._id,
        status: status
      })
      await this.initList()
    },
    async openSubscribe () {
      const { href } = this.$router.resolve({ path: '/subscribe' })
      window.open(href, '_blank')
    },
    handleDisplay: function (value, field) {
      const enums = {
        platform: {
          1: '企业微信',
          2: '钉钉',
          3: '飞书',
          4: '微信'
        },
        type: {
          1: '群机器人',
          2: '应用机器人'
        },
        status: {
          1: '已启用',
          2: '未启用'
        }
      }
      return enums[field][value]
    }
  }
})
</script>

<style lang="scss">
.msg-container {

}

.text-h6 {

}
</style>
